import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';

type Props = {
  onOpen: () => void;
  summary: string;
};

const FilterBar: React.FC<Props> = ({ onOpen, summary }) => {
  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.chip} onPress={onOpen} activeOpacity={0.8}>
        <Text style={styles.chipText}>筛选</Text>
      </TouchableOpacity>
      <Text style={styles.summary} numberOfLines={1}>{summary}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 8,
    backgroundColor: '#fff',
  },
  chip: {
    backgroundColor: '#007AFF',
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 16,
  },
  chipText: { color: '#fff', fontWeight: '600' },
  summary: { marginLeft: 12, color: '#666', flex: 1 },
});

export default FilterBar;

